<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		<link href="../css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" type="text/css" href="../css/app.css" />
		<link href="../css/mui.imageviewer.css" rel="stylesheet" />
		<link href="../css/imgenlarge.css"  rel="stylesheet" />
		<style>
			html,
					body {
						height: 100%;
						margin: 0px;
						padding: 0px;
						-webkit-touch-callout: none;
						-webkit-user-select: none;
					}
					.footer-left {
						position: absolute;
						width: 50px;
						height: 50px;
						left: 0px;
						bottom: 0px;
						text-align: center;
						vertical-align: middle;
						line-height: 100%;
						padding: 12px 4px;
					}
					.footer-right {
						position: absolute;
						width: 50px;
						height: 91.5px;
						right: 0px;
						bottom: 0px;
						text-align: center;
						display: inline-block;
						line-height: 36px;
						font-size: 14px;
					}
					.footer-center {
						height: 34.5px;
						padding: 5px 0px;
					}
					.footer-center [class*=input] {
						width: 100%;
						height: 100%;
						border-radius:35px;
					}
					.footer-center .input-text {
						background: #fff;
						border: solid 1px #ddd;
						padding: 15px !important;
						font-size: 16px !important;
						line-height: 18px !important;
						font-family: verdana !important;
						overflow: hidden;
					}
					.footer-center .input-sound {
						background-color: #eee;
					}
					.mui-content {
						height: 100%;
						padding: 44px 0px 50px 0px;
						overflow: auto;
						background-color: #F8F8F8;
						box-sizing: border-box;
					}
					#msg-list {
						height: 100%;
						overflow: auto;
						height: 100%;
						padding-bottom: 60px;
						box-sizing: border-box;
						-webkit-overflow-scrolling: touch;
					}
					.msg-item {
						padding: 8px;
						clear: both;
					}
					.msg-item .mui-item-clear {
						clear: both;
					}
					.msg-item .msg-user {
						width: 38px;
						height: 38px;
						border: solid 1px #d3d3d3;
						display: inline-block;
						background: #fff;
						border-radius: 3px;
						vertical-align: top;
						text-align: center;
						float: left;
						padding: 3px;
						color: #ddd;
					}
					.msg-item .msg-user-img{
						width: 38px;
						height: 38px;
						display: inline-block;
						border-radius: 3px;
						vertical-align: top;
						text-align: center;
						float: left;
						color: #ddd;
					}
					
					.msg-item .msg-content {
						display: inline-block;
						border-radius: 5px;
						border: solid 1px #d3d3d3;
						background-color: #FFFFFF;
						color: #333;
						padding: 8px;
						vertical-align: top;
						font-size: 15px;
						position: relative;
						margin: 0px 8px;
						max-width: 75%;
						min-width: 35px;
						float: left;
					}
					.msg-item .msg-content .msg-content-inner {
						overflow-x: hidden;
					}
					.msg-item .msg-content .msg-content-arrow {
						position: absolute;
						border: solid 1px #d3d3d3;
						border-right: none;
						border-top: none;
						background-color: #FFFFFF;
						width: 10px;
						height: 10px;
						left: -5px;
						top: 12px;
						-webkit-transform: rotateZ(45deg);
						transform: rotateZ(45deg);
					}
					.msg-item-self .msg-user,
					.msg-item-self .msg-content {
						float: right;
					}
					.msg-item-self .msg-content .msg-content-arrow {
						left: auto;
						right: -5px;
						-webkit-transform: rotateZ(225deg);
						transform: rotateZ(225deg);
					}
					.msg-item-self .msg-content,
					.msg-item-self .msg-content .msg-content-arrow {
						background-color: #4CD964;
						color: #fff;
						border-color: #2AC845;
					}
					footer .mui-icon {
						color: #000;
					}
					footer .mui-icon:active {
						color: #007AFF !important;
					}
					footer .mui-icon-paperplane:before {
						content: "发送";
					}
					footer .mui-icon-paperplane {
						/*-webkit-transform: rotateZ(45deg);
						transform: rotateZ(45deg);*/
						
						font-size: 16px;
						word-break: keep-all;
						line-height: 100%;
						padding-top: 6px;
						color: rgba(0, 135, 250, 1);
					}
					#msg-sound {
						-webkit-user-select: none !important;
						user-select: none !important;
					}
					.rprogress {
						position: absolute;
						left: 50%;
						top: 50%;
						width: 140px;
						height: 140px;
						margin-left: -70px;
						margin-top: -70px;
						background-image: url(../images/arecord.png);
						background-repeat: no-repeat;
						background-position: center center;
						background-size: 30px 30px;
						background-color: rgba(0, 0, 0, 0.7);
						border-radius: 5px;
						display: none;
						-webkit-transition: .15s;
					}
					.rschedule {
						background-color: rgba(0, 0, 0, 0);
						border: 5px solid rgba(0, 183, 229, 0.9);
						opacity: .9;
						border-left: 5px solid rgba(0, 0, 0, 0);
						border-right: 5px solid rgba(0, 0, 0, 0);
						border-radius: 50px;
						box-shadow: 0 0 15px #2187e7;
						width: 46px;
						height: 46px;
						position: absolute;
						left: 50%;
						top: 50%;
						margin-left: -23px;
						margin-top: -23px;
						-webkit-animation: spin 1s infinite linear;
						animation: spin 1s infinite linear;
					}
					.r-sigh{
						display: none;
						border-radius: 50px;
						box-shadow: 0 0 15px #2187e7;
						width: 46px;
						height: 46px;
						position: absolute;
						left: 50%;
						top: 50%;
						margin-left: -23px;
						margin-top: -23px;
						text-align: center;
						line-height: 46px;
						font-size: 40px;
						font-weight: bold;
						color: #2187e7;
					}
					.rprogress-sigh{
						background-image: none !important;
					}
					.rprogress-sigh .rschedule{
						display: none !important;
					}
					.rprogress-sigh .r-sigh{
						display: block !important;
					}
					.rsalert {
						font-size: 12px;
						color: #bbb;
						text-align: center;
						position: absolute;
						border-radius: 5px;
						width: 130px;
						margin: 5px 5px;
						padding: 5px;
						left: 0px;
						bottom: 0px;
					}
					@-webkit-keyframes spin {
						0% {
							-webkit-transform: rotate(0deg);
						}
						100% {
							-webkit-transform: rotate(360deg);
						}
					}
					@keyframes spin {
						0% {
							transform: rotate(0deg);
						}
						100% {
							transform: rotate(360deg);
						}
					}
					#h {
						background: #fff;
						border: solid 1px #ddd;
						padding: 10px !important;
						font-size: 16px !important;
						font-family: verdana !important;
						line-height: 18px !important;
						overflow: visible;
						position: absolute;
						left: -1000px;
						right: 0px;
						word-break: break-all;
						word-wrap: break-word;
					}
					.cancel {
						background-color: darkred;
					}
					.mui-bar>div:nth-child(2){
						position: relative;
						float: left;
						width:calc(100% -  44px);
						height: 100%;
						text-align: center;
						line-height: 44px;
						font-size:14px;
		                font-weight:bold;
		                color:rgba(255,255,255,1);
					}
					.mui-bar>div:nth-child(3){
						position: absolute;
						right: 15px;
						width: 22px;
						height: 100%;
						box-sizing: border-box;
						padding-top: 11px;
					}
					a{
						color:#FFFFFF;
					}
					.mui-bar>div:nth-child(3)>img{
		              width: 22px;
					  height: 22px;
					}
					.mui-bar {
		background:linear-gradient(180deg,rgba(252,126,119,1) 0%,rgba(254,96,93,1) 100%);
		box-shadow:0px 5px 8px 0px rgba(254, 95, 99, 0.35);
					}
					
					.leftnews,.rightnews{
						position: relative;
			            width: 100%;
						float: left;
						margin-top: 10px;
						padding: 0  15px;
					}
					.leftnews>div:nth-child(1){
						position: relative;
						float: left;
						width: 44px;
						height: 100%;
						
					}
					
					.leftnews>div:nth-child(1)>img{
						width: 44px;
						height: 44px;
						border-radius: 50%;
						}
					
					.leftnews>div:nth-child(2){
								position: relative;
								float: left;
								width: calc(100% - 98px);
								height: 100%;
								padding-left: 10px;
								box-sizing: border-box;
							
							}
					.leftnews>div:nth-child(2)>div:nth-child(1){
						width: 100%;
						height: 22px;
						line-height: 22px;
						font-size:14px;
		                font-weight:500;
		                color:#333333;
		                line-height:22px;
						text-align: left;
					}
						.leftnews>div:nth-child(2)>div:nth-child(2){
							line-height: 22px;
							font-size:14px;
							font-weight:500;
							color:#333333;
							display: inline-block;
							text-align: left;
							float: left;
							line-height:22px;
							background:rgba(255,255,255,1);
		                    border-radius:10px;
							padding: 7px  18px;
							box-sizing: border-box;
						}
					.leftnews>div:nth-child(2)>div:nth-child(3){
						width:100%;
						height: 40px;
						line-height: 22px;
						font-size:12px;
						font-weight:500;
						color:rgba(153,153,153,1);
						line-height:20px;
						padding-left: 80px;
						box-sizing: border-box;
						display: inline-block;
					}	
						.rightnews>div:nth-child(1){
						position: relative;
						float: right;
						width: 44px;
						height: 100%;
						
					}
					
					.rightnews>div:nth-child(1)>img{
						width: 44px;
						height: 44px;
						border-radius: 50%;
						}
					
					.rightnews>div:nth-child(2){
								position: relative;
								float: right;
								height: 100%;
								width: calc(100% - 98px);
								padding-right: 10px;
								box-sizing: border-box;
							  
							}
					.rightnews>div:nth-child(2)>div:nth-child(1){
						width: 100%;
						height: 22px;
						line-height: 22px;
						font-size:11px;
					    font-weight:500;
					    color:#333333;
					    line-height:22px;
						text-align: right;
					}
						.rightnews>div:nth-child(2)>div:nth-child(2){
							line-height: 22px;
							font-size:14px;
							font-weight:500;
							display: inline-block;
							color:#333333;
							float: right;
							line-height:22px;
							background:rgba(255,255,255,1);
					        border-radius:10px;
							padding: 7px  18px;
							box-sizing: border-box;
							text-align: right;
						}
						
						
					.rightnews>div:nth-child(2)>div:nth-child(3){
						display: inline-block;
						width: 100%;
						height: 40px;
						line-height: 22px;
						font-size:12px;
						font-weight:500;
						color:rgba(153,153,153,1);
						line-height:20px;
						text-align: center;
					}	
							footer {
							position: relative;
							width: 100%;
							
							border-top: solid 1px rgba(246,246,246,1);
							overflow: hidden;
							padding: 0px 30px;
							background:rgba(246,246,246,1);
							box-sizing: border-box;
						}
						.qun_foot{
							width: 100%;
							position: relative;
							float: left;
							padding-top: 7px;
							box-sizing: border-box;
						}
						input{
							width: 75%;
							line-height: 40px;
							position: relative;
							float: left;
							border: none;
							background:rgba(255,255,255,1);
							border-radius:35px;
							padding: 0px 19px;
							overflow: hidden;
							box-sizing: border-box;
							font-size: 14px;
						}
						label{
							width:131px;
							height:67px;
							background:linear-gradient(180deg,rgba(252,126,119,1) 0%,rgba(254,96,93,1) 100%);
							border-radius:34px;
							font-size:16px;
							font-family:PingFang-SC-Medium;
							font-weight:500;
							color:rgba(255,255,255,1);
							padding: 7px 15px;
							line-height: 43px;
							box-sizing: border-box;
							margin:15px;
						}
						.qun_one{
							width: 100%;
							position: relative;
							float: left;
							padding: 10px  0px;
							box-sizing: border-box;
						}
						.qun_two{
							width: 25%;
							position: relative;
							float: left;
						}
						.qun_two>img{
							width: 30px;
							height: 30px;
						}
						
						.container_foot{
							width: 100%;
							position: fixed;
							bottom: 0;
						}
						.tupiany{
							width: 100%;
							height: 219px;
							position: relative;
							float: left;
							background:rgba(255,255,255,1);
							 display: none;
						}
						.tupiany_one{
							width: 100%;
							position: relative;
							float: left;
							overflow-x: auto;
							white-space: nowrap;
						}
						.mui-input-row>img{
							width: auto;
							height: 176px;
						}
						.mui-checkbox.mui-left input[type=checkbox]{
							left: 95px;
						}
						.mui-checkbox input[type=checkbox]{
							width: 18px;
							height: 18px;
						}
						.mui-checkbox input[type=checkbox]:checked:before, .mui-radio input[type=radio]:checked:before {
							color: #FE635F;
						}
						.mui-checkbox{
							display: inline-block;
						}
						.tupian_two{
							width: 100%;
							position: relative;
							float: left;
							
						}
						.span_one{
							width: 75%;
							position: relative;
							float: left;
						}
						.span_one>span{
							font-size:15px;
							font-family:PingFang-SC-Medium;
							font-weight:500;
							color:rgba(51,51,51,1);
							padding-left: 15px;
						}
						.span_two{
							width:74px;
							height:33px;
							background:linear-gradient(180deg,rgba(252,126,119,1) 0%,rgba(254,96,93,1) 100%);
							border-radius:34px;
							float: left;
							line-height: 33px;
							text-align: center;
							margin-top: -5px;
						}
						.span_two>span{
							font-size:16px;
							font-family:PingFang-SC-Medium;
							font-weight:500;
							color:rgba(255,255,255,1);
						}
						.liwu{
							width:100%;
							height: 284px;
							position: relative;
							float: left;
							background:rgba(255,255,255,1);
						}
						.liwu_one{
							width: 100%;
							padding-left: 15px;
							box-sizing: border-box;
						}
						.liwu_one>span{
							font-size:14px;
							font-family:PingFang-SC-Medium;
							font-weight:500;
							color:rgba(51,51,51,1);
							line-height:48px;
						}
						.liwu_one>img{
							width: 6px;
							height: 9px;
						}
						.liwu_slider{
							width: 20%;
							margin-left: 2.5%;
							position: relative;
							float: left;
							display: inline-block;
							box-sizing: border-box;
							padding-bottom: 2px;
						}
						.slider_one{
							width: 100%;
							height: 40px;
							text-align: center;
						}
						.slider_one>img{
							width: 57px !important;
							height: 40px;
						}
						.slider_two{
							width: 100%;
							text-align: center;
							padding-top: 5px;
							box-sizing: border-box;
						}
						.slider_two>p{
							font-size:12px;
							font-family:PingFang-SC-Medium;
							font-weight:500;
							color:rgba(102,102,102,1);
						}
						.slider_three{
							width: 100%;
							text-align: center;
							box-sizing: border-box;
						}
						.slider_three>img{
							width: 11px !important;
							height: 11px;
						}
						.slider_three>span{
							font-size:11px;
							font-family:PingFang-SC-Medium;
							font-weight:500;
							color:rgba(255,175,35,1);
							
						}
						.mui-slider .mui-slider-group .mui-slider-item{
							height: 0px;
						}
						.mui-fullscreen {
							top: 40px;
							height: 215px;
						}
						.liwu_three{
							width: 100%;
							position: absolute;
							top: 87%;
						}
						.three_one{
							width: 15%;
							position: relative;
							float: left;
							padding-top: 6px;
							box-sizing: border-box;
							padding-left: 15px;
						}
						.three_one>img{
							width: 11px;
							height: 11px;
							position: relative;
							float: left;
							margin-top: 3px;
						}
						.three_one>span{
							font-size:14px;
							font-family:PingFang-SC-Medium;
							font-weight:500;
							color:rgba(249,171,16,1);
							position: relative;
							float: left;
						}
						.three_two{
							width: 15%;
							position: relative;
							float: left;
							padding-top: 6px;
							box-sizing: border-box;
							padding-left: 15px;
						}
						.three_two>span{
							font-size:14px;
							font-family:PingFang-SC-Medium;
							font-weight:500;
							color:rgba(102,102,102,1);
						}
						.three_two>img{
							width: 6px;
							height: 9px;
						}
						.three_btn{
							width: 30%;
							height: 33px;
							position: relative;
							float: right;
							background:linear-gradient(180deg,rgba(252,126,119,1) 0%,rgba(254,96,93,1) 100%);
							border-radius:34px;
							text-align: center;
							line-height: 33px;
							margin-right: 15px;
						}
						.three_btn>span{
							font-size:16px;
							font-family:PingFang-SC-Medium;
							font-weight:500;
							color:rgba(255,255,255,1);
						}
						.liwu_secode{
							width: 100%;
							position: relative;
							float: left;
						}
						.secode_one{
							    width: 15%;
								position: relative;
								float: left;
								padding-left: 15px;
								box-sizing: border-box;
						}
						.secode_one>span{
							font-size:14px;
							font-family:PingFang-SC-Medium;
							font-weight:500;
							color:rgba(51,51,51,1);
							line-height:36px;
						}
						.secode_two{
							height:24px;
							background:rgba(237,234,234,1);
							border-radius:30px 25px 25px 20px;
							position: relative;
							float: left;
							line-height: 24px;
							margin-top: 6px;
						}
						.secode_two>img{
							width:24px;
							height:24px;
							border-radius:24px;
						}
						.secode_two>span{
							font-size:14px;
							font-family:PingFang-SC-Medium;
							font-weight:500;
							color:rgba(51,51,51,1);
							position: relative;
							float: right;
							padding-right: 15px;
							box-sizing: border-box;
						}
						.secode_three{
							width: 15%;
							position: relative;
							float: right;
							padding-top: 6px;
							box-sizing: border-box;
						}
						.secode_three>span{
							font-size:14px;
						font-family:PingFang-SC-Medium;
						font-weight:500;
						color:rgba(51,51,51,1);
						}
						.secode_three>img{
							width: 6px;
							height: 9px;
						}
						.active{
							border: 1px solid red;
						}
						
						.yinpin{
							position: relative;
							float: left;
							width: 100%;
							height: 20px;
						}
						.yinse{
							position: absolute;
							width: 100%;
							height: 20px;
							background: red;
							top: 0px;
						}
					/* 	#mList{
							position: relative;
							float: left;
							width: 100%;
							background: none;
							border: none;
						} */
						
					.leftnews .recordItem{
							position: relative;
							width: 100px;
							float: left;
							background: #9eea6a;
							text-align: left;
							border-radius: 10px;
							padding: 0  15px;
							line-height: 35px;
						    height: 35px;
							box-sizing: border-box;
							}
					.mList{
					height: 44px;
					background: none!important;
				}		
							
					.rightnews	.recordItem{
							position: relative;
							width: 100px;
							line-height: 35px;
							height: 35px;
							float: right;
							background: #9eea6a;
							text-align: right;
							border-radius: 10px;
							padding: 0  15px;
							box-sizing: border-box;
						}
					.liaoimg{
						position: relative;
						width: 100%;
					}	
					a:active{
						color: #FFFFFF;
					}	
		
						.jianghua{
							width: 100%;
							height: 284px;
							position: relative;
							background:rgba(255,255,255,1);
							text-align: center;
							padding-top: 35px;
							box-sizing: border-box;
						}
						
						.jianghua>p:nth-child(1){
							font-size:15px;
							font-family:PingFang-SC-Medium;
							font-weight:500;
							color:rgba(153,153,153,1);
							line-height:20px;
						}
						.jianghua>img{
							width: 90px;
							height: 90px;
						}
						.jianghua>p:nth-child(3){
							font-size:13px;
							font-family:PingFang-SC-Medium;
							font-weight:500;
							color:rgba(254,99,96,1);
							line-height:20px;
						}
						.actives{
							background: #fad5d5;
							box-sizing: border-box;
						}
						.leftnewsddd{
							position: relative;
							    width: 100%;
							    float: left;
							    margin-top: 10px;
							    padding: 0 15px;
								box-sizing: border-box;
								padding-left: 69px;
						}
						.lefttis{
							background: #FFFFFF;
							display: inline-block;
							border-radius: 10px;
						}
						
					
						.lefttis span{
							position: relative;
							float: left;
							padding: 0 3px;
							line-height: 40px;
							box-sizing: border-box;
							color: red;
						}
						.lefttis span:nth-child(2){
							color: #000000!important;
						}
						.lefttis span:last-child{
							margin-left: 10px; 
							color: #000000!important;
						}
						
						.lefttis img{
							position: relative;
							float: left;
							width: 40px;
							height: 40px;
							margin-left: 10px;
						}
						.lefttiss{
							position: relative;
							    width: 100%;
							    height: 40px;
							    line-height: 22px;
							    font-size: 12px;
							    font-weight: 500;
							    color: rgba(153,153,153,1);
							    line-height: 20px;
								padding-left: 80px;
								box-sizing: border-box;
						}
						
						.history{
							position: relative;
							padding: 2px  5px;
							box-sizing: border-box;
							width: 100%;
							color: black;
							text-align: center;
							font-size: 14px;
							background: #DDDDDD;
							line-height: 30px;
						}
		</style>
	</head>

	<body contextmenu="return false;"  id="body" >
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<div id="qunname"></div>
		</header>
		
		<div class="mui-content" id="mui-content">
			<div id='msg-list'>
					<div class="history recordItem">历史纪录</div>
				<!-- <div class="leftnews">
					<div><img  src="../image/touxiangmy.png" /></div>
					<div class="pingluns">   <div>张雪</div>
						    <div>音乐让人痴迷的点，就是它的内容，它的情感，它的境界。其实，很多人听不出歌手的能力，听到喜欢的歌时，要不就是被那声音打动，或者被歌词感染，要么就是感觉这首歌，唱到了自己的心理，所以，不断的听，不断的沉溺在哪个世界之中，不能自拔。</div>
							<div>07-03  18:16</div>
					</div>
				</div>
				<div class="rightnews">
						<div><img  src="../image/touxiangmy.png" /></div>
					<div class="pingluns">   <div>小小英</div>
						    <div>音乐让就拔。</div>
							<div>07-03  18:16</div>
					</div>
				</div> -->
				<!-- 音频文件 -->
				<!-- <div class="leftnews">
					<div><img  src="../image/touxiangmy.png" /></div>
					<div class="pingluns">   <div>张雪</div>
					   <div class="mList"><div class='recordItem'  src='https://www.w3school.com.cn/i/horse.ogg'>12  s音频</div></div>
					   <div>07-03  18:16</div>
					</div>
				</div>
				
				<div class="rightnews">
						<div><img  src="../image/touxiangmy.png" /></div>
					<div class="pingluns">   <div>小小英</div>
					        <div class="mList"><div class='recordItem' href="java"  src='https://www.w3school.com.cn/i/horse.ogg'>12  s音频</div></div>
							<div>07-03  18:16</div>
					</div>
				</div> -->
				
			<!-- <div class="leftnews">
				<div><img  src="../image/touxiangmy.png" /></div>
				<div class="pingluns">   <div>张雪</div>
				   <div><img  class="liaoimg" src="../image/767b9f7d547d7d608bb0f36a55a476738816dbc21dd9a-fEJ4nN_fw658@2x.png" /></div>
				<div>07-03  18:16</div>
				</div>
			</div> -->
			
			<!-- <div class="rightnews">
					<div><img  src="../image/touxiangmy.png" /></div>
				<div class="pingluns">   <div>小小英</div>
				        <div ><img   class="liaoimg" src="../image/767b9f7d547d7d608bb0f36a55a476738816dbc21dd9a-fEJ4nN_fw658@2x.png" /></div>
				<div>07-03  18:16</div>
				</div>
			</div> -->
			
			
						
			<!-- <div class="leftnewsddd">
				<div class="lefttis">
               <span>张学</span><span>送给</span><span>李玉川</span>
				<img  class="liaoimg" src="../image/767b9f7d547d7d608bb0f36a55a476738816dbc21dd9a-fEJ4nN_fw658@2x.png" /><span>x1</span>
				</div>
				<div class="lefttiss">07-03  18:16</div>
			</div> -->
			
			
	
			</div>
		</div>
		
		
		<div class="container_foot">
			<footer>
				<div class="qun_foot">
					<input id="texts" rows="" cols="" class="qun_text" />
						
					<label id="fasongwenzhi">
						发送
					</label>
				</div>
				<div class="qun_one">
					<div class="qun_two">
						<img   state="0" src="../image/weixuanyuyin.png" >
					</div>
					<div  class="qun_two">
						<img state="1"  src="../image/weixuanxiangc.png" >
					</div>
					<div class="qun_two">
						<img  state="2" state="2" src="../image/weixuanxiangj.png" >
					</div>
					<!-- <div  class="qun_two">
						<img state="3" src="../image/weixuanliwu.png" >
					</div> -->
				</div>
			</footer>
			
			
			<!-- 讲话 -->
			<div class="jianghua" style="display: none;">
				      <div id="time"></div>
				<p>按住说话</p >
				<img src="../image/lyin.png"  id="btnStartRecord" alt="">
				<p>对讲</p >
            
			</div>
			<!-- 图片 -->
			<div class="tupiany">
				<!-- <div class="tupiany_one">
					<div class="mui-input-row mui-checkbox mui-left">
					  <img src="../image/9072f7c0d0cf707cc373c1a446534bb.png" >
					  <input name="checkbox1" value="Item 1" type="checkbox">
					</div>
					<div class="mui-input-row mui-checkbox mui-left">
					  <img src="../image/9072f7c0d0cf707cc373c1a446534bb.png" >
					  <input name="checkbox1" value="Item 1" type="checkbox">
					</div>
					<div class="mui-input-row mui-checkbox mui-left">
					  <img src="../image/9072f7c0d0cf707cc373c1a446534bb.png" >
					  <input name="checkbox1" value="Item 1" type="checkbox">
					</div>
					<div class="mui-input-row mui-checkbox mui-left">
					  <img src="../image/9072f7c0d0cf707cc373c1a446534bb.png" >
					  <input name="checkbox1" value="Item 1" type="checkbox">
					</div>
				</div>
				<div class="tupian_two">
					<div class="span_one">
						<span>相册</span>
					</div>
					<div class="span_two">
						<span>发送(2)</span>
					</div>
				</div> -->
			</div>
		</div>
		
			<div class="bg" style="display:none">
			<div class="bgimg"><img src="../image/drug.png" style=""></div>
		</div>
	<!-- 	<div id='sound-alert' class="rprogress">
			<div class="rschedule"></div>
			<div class="r-sigh">!</div>
			<div id="audio_tips" class="rsalert">手指上滑，取消发送</div>
		</div> -->
		<script src="../js/mui.min.js"></script>
		<script src="../js/jquery-2.1.4.min.js"></script>
		<!-- <script src="../sub4/qunliaosub4.js"></script> -->
		<script src="danliao.js"></script>
		<script src="../js/upyinandimg.js"></script>
		<script src="../js/imgenlarged.js"></script>
	<!-- 	<script src="../js/mui.imageViewer.js"></script>
		<script src="../js/arttmpl.js"></script> -->
		<script type="text/javascript" charset="utf-8">
			
			
	
	

	
mui.plusReady(function(){   
	
	//监听 从选人页面返回来之后  进行 的操作
	window.addEventListener('cusRefresh',function(event){
			 // var  name=event.detail.backname;
				// var  backsrc=event.detail.backsrc;
				//  var backid= event.detail.backid
		  //       $(".liwu_one").css("display","none")
				// $(".liwu_secode").css("display","block");
		  //       $(".secode_two").children("img").attr("src",backsrc);
				// $(".secode_two").children("span").attr("nameid",backid);	
				// $(".secode_two").children("span").text(name);
	});  
	
			window.addEventListener("refreshdwwww", function (e) {
			// location.reload()
			});
	
	var url = plus.storage.getItem('url');
	var user = plus.storage.getItem('user');
	user = JSON.parse(user);
	var web = plus.webview.currentWebview();
	var tos = web.tos;
	var create_time = 0;
	var page = 1;
	function getData(func){
		if(page==0){
			mui.toast('没有更多了');
			return;
		}
		mui.post(url+'/juyou/danliao/getjilu',{token:user.token,tos:tos,page:page},function(res){
			if(res.code==200){
				if(res.data.length<10){
					page = 0;
				}else{
					page = page+1;
				}
				mui.each(res.data,function(i,v){
					if(v.types==1){
						type1(v,user.id);
					}else if(v.types==2){
						type2(v,user.id);
					}else if(v.types==3){
						type3(v,user.id);
					}
				})
				setTimeout(function(){
					$("#msg-list").scrollTop($("#msg-list")[0].scrollHeight);
				},500)
			}else{
				mui.toast(res.msg);
			}
		})
	}
	
	function getDatas(){
		if(page==0){
			mui.toast('没有更多了');
			return;
		}
		mui.post(url+'/juyou/danliao/getjilu',{token:user.token,tos:tos,page:page},function(res){
			if(res.code==200){
				if(res.data.length<10){
					page = 0;
				}else{
					page = page+1;
				}
				mui.each(res.data,function(i,v){
					if(v.types==1){
						uptype1(v,user.id);
					}else if(v.types==2){
						uptype2(v,user.id);
					}else if(v.types==3){
						uptype3(v,user.id);
					}
				})
			}else{
				mui.toast(res.msg);
			}
		})
	}
	
	
	
	var ws =  new WebSocket("ws://59.110.232.175:2348");
	ws.onopen = function(){
		// mui.toast('连接成功')
		console.log('连接成功')
	}
	ws.onmessage = function(res){
		var data = res.data;
		// mui.toast(data);
		// mui.alert(data);
		data = JSON.parse(data);
		// mui.alert(url)
		// mui.toast(data.client_id)
		if(data.client_id){
			mui.post(url+'/juyou/danliao/getbindliaotian',{token:user.token,client_id:data.client_id},function(ress){
				if(ress.code!==200){
					mui.toast(ress.msg);
				}else{
					console.log(ress.msg);
				}
			})
		}else if(data.type=='ping'){
			console.log(data.type);
			// mui.toast(JSON.stringify(data));
		}else{
			if(data.types==1){
				type1(data,user.id);
			}else if(data.types==2){
				type2(data,user.id);
			}else if(data.types==3){
				type3(data,user.id);
			}
			setTimeout(function(){
				$("#msg-list").scrollTop($("#msg-list")[0].scrollHeight);
			},500)
		}
	}
	ws.onclose = function(){
		console.log('连接关闭');
	}
	
	
	mui.init({
		beforeback: function() {　　　　
		var list = plus.webview.currentWebview().opener();　　　　
			  //refresh是A页面自定义事件
		mui.fire(list, 'wyaoshuaxin');
			 //返回true,继续页面关闭逻辑
		return true;
		},
	});
	getData();
	mui('#msg-list').on('tap','.history',function(res){
		getDatas();
	})
	
	
		//发送文字
	mui('.qun_foot').on('tap','#fasongwenzhi',function(res){
		// mui.alert('haha')
		var str = $(this).prev().val();
		var that = this;
		if(!str){
			mui.toast('请输入发送的内容!');
			return;
		}
		var data = {
			tos:tos,
			neirong:str,
			token:user.token,
		}
		// mui.alert(str);
		mui.post(url+'/juyou/danliao/sandtostext',data,function(res){
			// mui.toast(res.msg);
			if(res.code==200){
				$(that).prev().val('');
			$("#texts").blur();
			}else{
				mui.toast(res.msg);
			}
		})
	})
	
	//发送语音
	$("#btnStartRecord").bind('touchstart',function(){
		
		
		
		
		myluyin(url+'/juyou/index/upimg',function(shijian){
			$("#time").text(shijian);
		},function(datas){
			
				 var btnArray = ['确定', '取消']; 
			// Phone = "025-88888888"; 
			mui.confirm('是否发送语音？', '提示', btnArray, function(e) { 
			    if (e.index == 0) { 
			$("#time").text('');
			// mui.toast(datas.id);
			// mui.toast(datas.path);
			// plus.nativeUI.showWaiting();
			var data={
				tos:tos,
				token:user.token,
				yuyin:datas.id,
				yuyin_time:datas.yuyin_time
			}
			// mui.alert(datas.id+''+datas.yuyin_time)
			plus.nativeUI.showWaiting();
			mui.post(url+'/juyou/danliao/sendtosyuying',data,function(res){
				plus.nativeUI.closeWaiting();
				if(res.code==200){
					$("#msg-list").scrollTop($("#msg-list")[0].scrollHeight);
				}else{
					mui.toast(res.msg);
				}
			})
			}
			})
		})
	});
	
	//这个是点击语音进行播放
	$(document).on("tap",".mList  .recordItem",function(){
		            var oName = $(this).attr("src");
		            var path = "";
		            var player = plus.audio.createPlayer(oName);
			var num =player.getDuration();//获取音频总长度number  
		setTimeout(function(){//延时获取，否则可能没有返回长度  
		    var num = player.getDuration();  
		},100)  
		            player.play(function(){
		                console.log('play ended');
		            },function(e){
		                console.log("message："+e.message);
		            });
		  });
	
	
	
	//点击聊天下面的四个按钮
		//点击语音聊天按钮
	$(".qun_one").on("tap",".qun_two  img",function(){

			var  index=$(this).attr("state")
			if(index==0){
				$(".jianghua").css("display","block");
				$(".liwu").css("display","none");
				  $(".liwu_one").css("display","block")
				$(".liwu_secode").css("display","none")
				$("#msg-list").css("padding-bottom","350px");
				$("#msg-list").scrollTop($("#msg-list")[0].scrollHeight);
				//点击照片
			}else  if(index==1){
				galleryImages(url+'/juyou/index/upimgs', function(res){
					var data ={
						tos:tos,
						tupians:res.id,
						token:user.token,
					}
					// mui.alert(res.id);
					plus.nativeUI.showWaiting();
					mui.post(url+'/juyou/danliao/sendtosimg',data,function(res){
						plus.nativeUI.closeWaiting();
						if(res.code==200){
							setTimeout(function(){
								$("#msg-list").scrollTop($("#msg-list")[0].scrollHeight);
							},500)
							
						}else{
							mui.toast(res.msg);
						}
					})
					
				})
				// 点击拍照
			}else if(index==2){
				getImages(url+'/juyou/index/upimgs',function(res){
					
					// $("#msg-list").scrollTop($("#msg-list")[0].scrollHeight);
					var data ={
						tos:tos,
						tupians:res.id,
						token:user.token,
					}
					// mui.alert(res.id);
					plus.nativeUI.showWaiting();
					mui.post(url+'/juyou/danliao/sendtosimg',data,function(res){
						plus.nativeUI.closeWaiting();
						if(res.code==200){
							$("#msg-list").scrollTop($("#msg-list")[0].scrollHeight);
						}else{
							mui.toast(res.msg);
						}
					})
				})
				
				//点击礼物
			}else  if(index==3){
				$(".liwu").css("display","block");
				$(".jianghua").css("display","none");
			var backid=$(".secode_two").children("span").attr("nameid");	
				if(backid){
					$(".liwu_one").css("display","none")
					$(".liwu_secode").css("display","block");
				}
				$("#msg-list").css("padding-bottom","350px");		
				$("#msg-list").scrollTop($("#msg-list")[0].scrollHeight);
			}
		})
	
	//进入群资料信息
	mui(".mui-bar").on("tap",".navigation",function(){
	   mui.openWindow({
		   	url:'qunziliaosub4.html',
		   id:"qunziliaosub4.html",
		   extras: {
		   //参数
		   qunid:qunid
		   },
		   show: {
		   	autoShow: true, //页面loaded事件发生后自动显示，默认为true
		   	aniShow: "slide-in-right", //页面显示动画，默认为”slide-in-right“；
		   	duration: 100 //页面动画持续时间，Android平台默认100毫秒，iOS平台默认200毫秒；
		   },
		   waiting: {
		   	autoShow: true, //自动显示等待框，默认为true
		   	title: '正在加载...', //等待对话框上显示的提示内容
		   }
		   
	   })
	})
	
	//点击选择赠送对象
	mui(document).on("tap",".liwu_one",function(){
			mui.openWindow({
	         url:"choose.html",		
			 id:"choose.html",
			 extras: {
			 	qunid:qunid,
			 },
			}) 
	});
		//换人
	mui(document).on("tap",".secode_three",function(){
			mui.openWindow({
	         url:"choose.html",		
			 id:"choose.html",	
				 extras: {
				 	qunid:qunid,
				 },
			}) 
	});
	
	
	//点击选择带礼物 
	mui(document).on("tap",".liwu_slider",function(){
		$(this).addClass("actives");
		$(this).siblings().removeClass("actives");
		$(this).parent().closest(".mui-slider-item").siblings().children(".liwu_slider").removeClass("actives")
		liwuid = $(this).attr('data-id');
		var myvalue = $(this).attr('data-icon');
		$("#jiage").text(myvalue);
		// mui.alert(liwuid);
		// mui.alert(myvalue);
	});


	//充值
	mui(document).on("tap",".three_two",function(){
			mui.openWindow({
	         url:"../sub5/huchongzhigold.html",		
			 id:"huchongzhigold.html",		
			}) 
	});
	
	    //立即赠送礼物
		mui(document).on("tap",".three_btn",function(){
			// var liwuid = 
			var userid = $(".secode_two").children("span").attr("nameid");
			if(!liwuid){
				mui.toast('请选择礼物');
				return;
			}
			var data={
				qun:qunid,
				token:user.token,
				liwu:liwuid,
				tos:userid
			}
			plus.nativeUI.showWaiting();
			mui.post(url+'/juyou/Grouping/songli',data,function(res){
				// mui.toast(res.msg);
				plus.nativeUI.closeWaiting();
			
				if(res.code==200){
					setTimeout(function(){
						$("#msg-list").scrollTop($("#msg-list")[0].scrollHeight);
					},500)
				}else if(res.code==209){
					mui.toast(res.msg);
					setTimeout(function() {
						mui.openWindow({
						 url:"../sub5/huchongzhigold.html",		
						 id:"huchongzhigold.html",		
						}) 
					}, 1500);
				}else{
					mui.toast(res.msg);
				}
			})
    	});
	
	
	            //页面视觉化 效果初始化
				// var msghei=document.getElementById("mui-content");
	   //          var  height= $(document).height();
				$("#msg-list").scrollTop($("#msg-list")[0].scrollHeight);
				
			
				
				//点击空白隐藏 下面的东西
				mui(document).on("tap","#msg-list",function(e){
						var _con=$(".recordItem")
					if(!_con.is(e.target) && _con.has(e.target).length === 0)	{
						$(".liwu").css("display","none");
						$(".jianghua").css("display","none");
							$("#msg-list").css("padding-bottom","60px");		
						$("#msg-list").scrollTop($("#msg-list")[0].scrollHeight);
						$(".liwu_one").css("display","none")
						$(".liwu_secode").css("display","block");
						$("input").blur();
					}
				})
				
				//输入框 获取焦点的时候
				$(document).on("focus",".qun_text",function(){
					$(".liwu").css("display","none");
					$(".jianghua").css("display","none");
						$("#msg-list").css("padding-bottom","350px");		
				$("#msg-list").scrollTop($("#msg-list")[0].scrollHeight);
					
				})
				//失去焦点
				$(document).on("blur",".qun_text",function(){
					$(".liwu").css("display","none");
					$(".jianghua").css("display","none");
						$("#msg-list").css("padding-bottom","60px");		
					   $("#msg-list").scrollTop($("#msg-list")[0].scrollHeight);
					   $(".liwu_one").css("display","block")
						$(".liwu_secode").css("display","none")
				})
			
				//键盘弹出或者收起事件处理	
				const innerHeight = window.innerHeight;
				  window.addEventListener('resize', () => {
					const newInnerHeight = window.innerHeight;
					if (innerHeight > newInnerHeight) {
					  // 键盘弹出事件处理
					} else {
					  // 键盘收起事件处理
					  $("input").blur();
					}
				  });
				  
				  
		$("#btnStartRecord").bind('touchend',function(){
		    endRecord("time");
			var text="按住说话"
		});    		  
			
				  
				  })
				  	
			//聊天发送礼物
		 function sendgift(giftid,sendname) {
							  plus.nativeUI.showWaiting();
							  mui.ajax('发送礼物地址',{
									data:{
										// file:imgData
									},
									dataType:'json',//服务器返回json格式数据
									type:'post',//HTTP请求类型
									timeout:10000,//超时时间设置为10秒；
									success:function(data){
										console.log("上传数据")
										plus.nativeUI.closeWaiting()						  
									},
									error:function(data){
										mui.alert(data+"1")
									}
								});
		                  }		
		
		
        
			
			
		</script>
	</body>

</html>
